<template>
    <div ref="mainContainer" class="mainContainer">
        <div ref="viewerContainer" class="viewer">
            <vc-viewer
                ref="vcViewer"
                :animation="animation"
                :baseLayerPicker="baseLayerPicker"
                :homeButton="homeButton"
                :fullscreenButton="fullscreenButton"
                :fullscreenElement="fullscreenElement"
                :infoBox="infoBox"
                :sceneMode="sceneMode"
                :sceneModePicker="sceneModePicker"
                :timeline="timeline"
                @ready="ready"
            >
                <vc-navigation :options="navOptions"></vc-navigation>
                <!-- 0. 加载Cesium官方提供的3D地形数据：-->
                <div v-if="enableMapTerrain">
                    <vc-provider-terrain-cesium ref="terrain"></vc-provider-terrain-cesium>
                </div>

                <!-- 1. 天地图img（卫星影像）图层： -->
                <vc-layer-imagery
                    :rectangle="satelliteImgRect"
                >
                    <vc-provider-imagery-tianditu
                        :token="tk"
                        mapStyle="img_w"
                        :maximum-level="18"
                    ></vc-provider-imagery-tianditu>
                </vc-layer-imagery>

                <!-- 2. 天地图ibo（全球国界省界）图层： -->
                <vc-layer-imagery ref="layerInternationalBorders" :maximum-terrain-level="19">
                    <vc-provider-imagery-tianditu
                        :token="tk"
                        mapStyle="ibo_w"
                    ></vc-provider-imagery-tianditu>
                </vc-layer-imagery>

                <!-- 3.天地图cia（路网信息）图层： -->
                <div v-if="showTiandituCityRoadLayer">
                    <vc-layer-imagery ref="layerText" :maximum-terrain-level="19">
                        <vc-provider-imagery-tianditu
                            :token="tk"
                            mapStyle="cia_w"
                        ></vc-provider-imagery-tianditu>
                    </vc-layer-imagery>
                </div>
            </vc-viewer>
        </div>
        <ul class="mapOptionContainer">
            <li>
                <el-switch v-model="showTiandituCityRoadLayer"></el-switch>
                <span>叠加地名和路网数据</span>
            </li>
            <li>
                <el-switch v-model="enableMapTerrain"></el-switch>
                <span>启用3D地形渲染</span>
            </li>
        </ul>
    </div>
</template>

<script>
import '@/plugins/vue-cesium'

// 用到的图片资源
import STAR_PNG from '@/assets/images/star.png'

export default {
    components: {
    },
    data() {
        return {
            satelliteImgRect: null,
            navOptions: {
                enableCompass: true,
                enableZoomControl: true,
                enableDistanceLegend: true,
                enableLocationBar: true,
                enableCompassOuterRing: true,
                enablePrintView: true,
                enableMyLocation: true,
            },
            sceneMode: 3,
            sceneModePicker: true,
            animation: true,
            timeline: false,
            baseLayerPicker: false,
            homeButton: true,
            fullscreenButton: true,
            showTiandituCityRoadLayer: false,
            enableMapTerrain: true,
            infoBox: true,
            fullscreenElement: document.body,
            tk: "e7894a985fe457b58ef9c65beae0619a", /// 天地图浏览器端令牌token http://console.tianditu.gov.cn/api/key
            viewer: null,
        }
    },
    created() {
        //debug
        // this.$refs.vcViewer.createPromise.then(({Cesium, viewer}) => {
        //   console.log('viewer is loaded.')
        // })
    },
    methods: {
        ready(cesiumInstance) {
            const {Cesium, viewer} = cesiumInstance
            this.sceneMode = Cesium.SceneMode.SCENE3D
            Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.0
            Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
                /* 青岛市左下角：经度，纬度 */
                120.30, 36.02,
                /* 青岛市右上角：经度，纬度 */
                120.50, 36.12
            )
            this.satelliteImgRect = Cesium.Rectangle.fromDegrees(65, 0, 140, 60)
            viewer.scene.globe.depthTestAgainstTerrain = true
            viewer.scene.globe.enableLighting = true
            this.fullscreenElement = this.$refs.viewerContainer
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(120.42451, 36.07000, 0.35*1000),
                orientation: {
                    heading : Cesium.Math.toRadians(0),
                    pitch : Cesium.Math.toRadians(-20),
                    roll : Cesium.Math.toRadians(0)
                },
            })
            //强制隐藏cesium控件版权信息
            viewer._cesiumWidget._creditContainer.style.display = "none"
        },
    },
}
</script>

<style lang="stylus" scoped>
@import '~cesium/Build/Cesium/Widgets/widgets.css'
@import '~vue-cesium/lib/vc-navigation.css'

.mainContainer
    position: relative
    width: 100%
    height: 100%
    margin: 0
    border-width: 0 // border: solid 5px green
    padding: 0

    ul
        list-style: none

    .mapOptionContainer
        position: absolute
        top: 5px
        left: 5px
        z-index: 100
        background-color: rgba(255, 255, 255, 0.625)
        border: solid 1px white
        padding: 10px
        box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.5)

    .viewer
        z-index: 0
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
</style>
